<!--列表页面-->
<template>
    <div id="infoList">
        <div class="head">
            <van-dropdown-menu>
                <van-dropdown-item v-model="value1"  :options="option1" @change="selectCls"/>
                <van-dropdown-item v-model="value2"  :options="option2" @change="selectSort"/>
            </van-dropdown-menu>
        </div>

        <!--列表-->
        <div class="body-list" :style="`height:${height}`">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div v-for="(data,index) in sList" :key="index">
                    <van-card
                        :tag=data.tag
                        :title=data.name
                        :thumb=data.imageURL
                    >
                    <p slot="desc">{{data.description}}</p>
                    <span slot="bottom" class="itemsSpan">联系电话：<a v-bind="{href:'tel:'+data.phone}" style="margin-right: 3.8rem;">{{data.phone}}</a>
                    <span style="color:#a09999">{{data.time}}</span>
                    </span>
                    </van-card>
                </div>
            </van-list>
        </div>
    </div>
</template>
<script>
import {selectInfoList} from '../../../request/mobile/InfoList/request_infoList'
export default {
    data(){
        return{
            option1: [
                    { text: '全部宠物', value: 0 },
                    { text: '出售', value: 1 },
                    { text: '托管', value: 2 }
             ],
            option2: [
                { text: '默认排序', value: 'a' },
                { text: '距离', value: 'b' },
                { text: '年龄', value: 'c' }
            ],
            value1: 0,
            value2: 'a',
            imageURL:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584088464473&di=127c34c576b9566a47696de2db438340&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1603%2F13%2Fc25%2F19156584_1457855651403.jpg',
            sList:[],
            height:'',
            loading:false,
            finished:false,
            pageNum:1,
            pageSize:10,
         }
    },
    methods:{
        getCLassFily(){

        },
        selectCls(){
            console.log(this.value1)
        },
        selectSort(){
            console.log(this.value2)
        },
         selectInfoList(){
             this.loading=true
            selectInfoList({pageNo:this.pageNum,pageNum:this.pageSize}).then(res=>{
                if(res.code==200){
                    var datas = res.data;
                    if(datas===null||datas.lenght==0){
                        this.finished=true;
                        this.loading=false
                        return;
                    }
                    for(var index in datas){
                        var data = datas[index];
                        this.sList.push({
                            id:data.releaseId,
                            description:data.petDescription,
                            phone:data.userPhone,
                            time:data.relesaeTime,
                            imageURL:data.petImage,
                            tag:data.releaseType,
                            name:data.petVariety
                        })
                    }
                    this.loading=false
                }
                else{
                    this.$Notify({ type: 'warning', message: res.msg })
                }
            })
        },
        /**
         * 计算div高度自适应
         */
         getHeight(){
            this.height =window.innerHeight-100+'px';
           // alert(this.height)
        },
        onLoad(){
             // 异步更新数据
            this.selectInfoList();
            this.pageNum++;
        },
    },
    created(){
       // window.addEventListener('resize', this.getHeight());
        this.getHeight();
       // this.selectInfoList()
    },
    mounted(){
    
    }
}
</script>

<style scoped>
    .body-list{
        overflow-y: scroll;
        /* height: 30.5rem; */
        width: 100%;
    }
    .itemsSpan{
        display: flex;
        justify-content: space-between; 
    }
</style>